<template>
  <div class="add_page">
    <!-- 导航 开始 -->
    <nav-bar title="口腔报告"></nav-bar>
    <!-- 导航 end -->

    <div class="banner">
      <img src="@/assets/images/report/bg.png" alt="" />
    </div>

    <div class="form_box">
      <div class="form_item form_item_no_line">
        <span class="label">是否有口腔全景片</span>
        <div class="input_box tag_box">
          <div
            class="tag"
            :class="form.hasPhotos ? 'tag_active' : ''"
            @click="changeImage(true)"
          >
            是
          </div>
          <div
            class="tag"
            :class="!form.hasPhotos ? 'tag_active' : ''"
            @click="changeImage(false)"
          >
            否
          </div>
        </div>
      </div>
      <div class="form_item form_item_tips" v-if="!form.hasPhotos">
        <img src="@/assets/images/tip.png" alt="" class="img" />
        <span>请尽量完善您的口腔信息，我们为您提供免费拍片服务</span>
      </div> 
      <div class="form_item" v-if="form.hasPhotos">
        <div class="label">
          <span>上传照片</span>
          <span class="tips">仅限jpg、png格式</span>
        </div>
        <div class="input_box">
          <van-uploader class="van_uploader" :after-read="afterRead">
            <template v-if="form.photograph">
              <!-- <li-image :src="form.photograph" class="upload_img"></li-image> -->
              <img :src="photograph" class="upload_img" alt="" />
            </template>
            <template v-else>
              <img
                src="@/assets/images/report/upload.png"
                class="upload_img"
                alt=""
              />
            </template>
          </van-uploader>
        </div>
      </div>
      <div class="form_item">
        <span class="label">姓名</span>
        <div class="input_box">
          <input
            type="text"
            v-model="form.name"
            class="a_input"
            placeholder="请输入姓名"
          />
        </div>
      </div>
      <div class="form_item">
        <span class="label">年龄</span>
        <div class="input_box">
          <input
            type="number"
            v-model="form.age"
            class="a_input"
            placeholder="请输入年龄"
          />
        </div>
      </div>
      <div class="form_item">
        <span class="label">您的手机号码</span>
        <div class="input_box">
          <input
            type="number"
            v-model="form.phone"
            class="a_input"
            maxlength="11"
            placeholder="请输入您的手机号码"
          />
        </div>
      </div>

      <div class="btn_group">
        <!-- <button class="btn" v-loading="loading" @click="saveInfo">立即提交</button> -->
        <van-button class="btn" :loading="loading" @click="saveInfo"
          >立即提交</van-button
        >
        <div class="show_tips">
          生成的口腔报告后将由口腔专业人员审核后通过微信发送给您!
        </div>
      </div>
    </div>

    <div class="footer">
      <img src="@/assets/images/report/icon.png" alt="" />
    </div>
  </div>
</template>
<script>
import { Uploader } from "vant";
import {
  PLATFORM_TYPE,
  UPLOAD_ORALCAVITYREPORT_APPLY,
  UPLOAD_FILE_INFO,
  GET_SEO_SETTING_INFO
} from "@/http/interface";
import { showToast, checkPhone } from "@/utils/utils";
export default {
  components: {
    [Uploader.name]: Uploader,
  },
  data() {
    return {
      form: { hasPhotos: true },
      loading: false,
      photograph: "",
      seoInfo:{}
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/report/add`}
      ]
    };
  },
  async asyncData({$axios}){
     // 获取seo配置
     let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 9, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};
    return {seoInfo}
  },
  methods: {
    // 切换是否有全景片
    changeImage(checked) {
      this.$set(this.form, "hasPhotos", checked);
    },

    // 读取文件
    async afterRead(response) {
      console.log(response);
      let file = response.file;
      let form = new FormData();
      form.append("file", file);
      let res = await this.$axios.post(UPLOAD_FILE_INFO, form);
      console.log(res);
      if (res.code == 200) {
        this.$set(this.form, "photograph", res.data);
        this.photograph = response.content;
      }
    },

    // 提交报告
    async saveInfo() {
      let o = this.form;
      let reg = /^[0-9]*$/;

      if (o.hasPhotos && !o.photograph) {
        showToast({
          message: "请上传照片",
        });
        return false;
      }
      if (!o.name) {
        showToast({
          message: "请输入姓名",
        });
        return false;
      }
      if (!o.age) {
        showToast({
          message: "请输入年龄",
        });
        return false;
      }

      if (!reg.test(o.age)) {
        showToast({
          message: "年龄只能输入数字",
        });
        return false;
      }

      if (!o.phone) {
        showToast({
          message: "请输入您的手机号码",
        });
        return false;
      }
      if (!checkPhone(o.phone)) {
        showToast({
          message: "您的手机号码格式不正确",
        });
        return false;
      }
      let oParams = {};
      oParams.name = o.name;
      oParams.age = o.age;
      oParams.phone = o.phone;
      oParams.hasPhotos = o.hasPhotos ? 1 : 0;
      if (o.hasPhotos) {
        oParams.photograph = o.photograph;
      }
      oParams.platform = PLATFORM_TYPE;
      this.loading = true;
      let res = await this.$axios.post(UPLOAD_ORALCAVITYREPORT_APPLY, oParams);
      this.loading = false;
      if (res.code == 200) {
        showToast({
          message: "提交成功",
          type: "success",
        });
        this.$router.go("-1");
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/report/add.less";
</style>